<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

    <title> Atrium - Single Page Responive Theme</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
   
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
       
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,600,700,800' rel='stylesheet' type='text/css' />
   
   <!-- Favicons -->
<link rel="shortcut icon" href="images/favicon.ico">

<link rel='stylesheet' href='css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/bootstrap-responsive.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/flexslider.css' type='text/css' media='all' />
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/colors.css' type='text/css' media='all' />
<link rel='stylesheet' href='js/prettyphoto/css/prettyPhoto.css' type='text/css' media='all' />

 </head>
 <body class="home blog">
 
 <header id="intro" class="parallax">
    <div class="bkg-cover">
		<div class="container">
	    	<div class="row-fluid intro-elem">
            <div class="span8 offset2">
                        <img src="images/logo-big.png" alt=""/>
            
                        <h4 class="intro-text">Responsive single page Wordpress theme suitable for individual portfolios or small businesses</h4>
            
                                    <p><a class="btn-intro btn-flat goto" href="#portfolio">Go to Portfolio</a></p>
            
             </div><!--.span9-->        
	        </div><!--.row-fluid-->
	    </div> <!--.container-->

    </div><!--.bkg-cover-->
 	</header> <!--#intro-->

<div class="nav-bar clearfix">
            <a class="scroll-down goto" href="#about"><img src="images/scroll-down.png" alt="Scroll Down"/></a>
    <div class="container">
<div class="row-fluid">
<div class="span12">

  <div id="logo"><a href="http://www.matchthemes.com/demohtml/atrium"><img src="images/logo-small.png" alt=""/></a></div>

<nav id="nav-desktop">
<ul class="menu">
<li><a href="#intro">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

</div>
</div>
</div>
</div><!--.nav-bar-->

 <section id="about" class=" parallax" style="background-image:url(images/bkgs/bkg-diamond.png); ">
		
                <div class="about-bkg mutualWrap">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
								<h1 class="section-title">Hi there!</h1>
				</div>

								<div class="span8 offset2">
			     <h4 class="section-text alignc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo sapien felis. Pellentes faucibus sollicitudin ante, at porta felis</h4>
				</div><!--end span8 -->
				
				</div><!--end span12 -->
				</div><!--end row -->
                
				<div class="row">

         
        <div class="span4 about-feature alignc">
		<div class="about-img">
        <div class="about-img-pos">
        <img src="images/heart.png" alt=""/>
        </div>
        </div>
		<h4>One Page Theme</h4>
		<span>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien  elis. Pellentes faucibus sollicit ante, at porta felis rutrum eget. Aenean eget odio vel libero porttitor.</span>
       	</div><!--end home-feature-->		

	        
        <div class="span4 about-feature alignc">
		<div class="about-img">
        <div class="about-img-pos">
        <img src="images/view.png" alt=""/>
        </div>
        </div>
		<h4>Parallax Effect</h4>
		<span>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien  elis. Pellentes faucibus sollicit ante, at porta felis rutrum eget. Aenean eget odio vel libero porttitor.</span>
       	</div><!--end home-feature-->		

	        
        <div class="span4 about-feature alignc">
		<div class="about-img">
        <div class="about-img-pos">
        <img src="images/ipad.png" alt=""/>
        </div>
        </div>
		<h4>Responsive Design</h4>
		<span>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien  elis. Pellentes faucibus sollicit ante, at porta felis rutrum eget. Aenean eget odio vel libero porttitor.</span>
       	</div><!--end home-feature-->		

</div><!--end row-->

</div><!--end container -->
</div><!--end about-bkg-->
</section><!--end about-->


<section id="team" class=" parallax" style=" background-image:url(images/bkgs/bkg-team.jpg); ">
		
        	 				
				<div class="team-bkg mutualWrap" style="background-color:rgba(119, 204, 164, 0.8); ">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
				                <h2 class="section-sub-title">Meet the team</h2>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
				
                   
 <div class="flexslider flexslider-team row">
  <ul class="slides span12">
  
            <li>
         <div class="row">                             
         
         <div class="span3 team-member alignc">
		<div class="team-member-img">
         <img src="images/team/team-1.jpg" alt=""/>
		</div>
         <h4>Mike Adam</h4>
         <span>ceo</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   </ul>
         
         </div><!--end span3-->
                  
        
		
	             
            <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-2.jpg" alt=""/>
         </div>
         
         <h4>John Adam</h4>
         <span>project manager</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   </ul>
         
         </div><!--end span3-->
			
			
			 	
	             
            <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-3.jpg" alt=""/>
         </div>
         
         <h4>Anne Adam</h4>
         <span>designer</span>
         
         <ul class="social">
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   <li><a class="gplus" href="#" target="_blank">Google+</a></li>
                  </ul>
         
         </div><!--end span3-->
			
			
			 	
	             
            <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-4.jpg" alt=""/>
         </div>
         
         <h4>Jack Adam</h4>
         <span>developer</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   <li><a class="gplus" href="#" target="_blank">Google+</a></li>
                  </ul>
         
         </div><!--end span3-->
			
			
			  </div></li><!--end team-row--> 	
	          <li>
         <div class="row">                             
         
         <div class="span3 team-member alignc">
		<div class="team-member-img">
         <img src="images/team/team-1.jpg" alt=""/>
		</div>
         <h4>Tom Adam</h4>
         <span>social media</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   <li><a class="gplus" href="#" target="_blank">Google+</a></li>
                  </ul>
         
         </div><!--end span3-->
                  
        
		
	             
            <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-2.jpg" alt=""/>
         </div>
         
         <h4>Robert Adam</h4>
         <span>designer</span>
         
         <ul class="social">
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   </ul>
         
         </div><!--end span3-->
			
	        <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-3.jpg" alt=""/>
         </div>
         
         <h4>Marie Adam</h4>
         <span>designer</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   <li><a class="gplus" href="#" target="_blank">Google+</a></li>
                  </ul>
         
         </div><!--end span3-->
			
          <div class="span3 team-member alignc">
         <div class="team-member-img">
         <img src="images/team/team-4.jpg" alt=""/>
         </div>
         
         <h4>Stu Adam</h4>
         <span>developer</span>
         
         <ul class="social">
                  <li><a class="facebook" href="#" target="_blank">Facebook</a></li>
                  <li><a class="twitter" href="#" target="_blank">Twitter</a></li>
                   </ul>
         
         </div><!--end span3-->
			
			
			  </div></li><!--end team-row--> 	
	   
 
</ul>

</div><!--end flexslider-->
</div><!--end container -->
<div><!--end team-bkg-->
</section><!--end team-->

<section id="portfolio" class=" no-parallax">
		 	                 
                <div class="portfolio-bkg mutualWrap-port">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
				<h1 class="section-title">Portfolio</h1>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
                </div><!--end container -->
                
				
<div class="portfolio-holder">
<ul id="portfolio-filter">
<li><a href="#" data-filter="*">All</a></li>


<li><a href="#" data-filter=".apps">Apps</a></li>


<li><a href="#" data-filter=".branding">Branding</a></li>


<li><a href="#" data-filter=".print">Print</a></li>


<li><a href="#" data-filter=".web">Web</a></li>


</ul>

<ul id="portfolio-items">



<li class="portfolio-item apps ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/weatherette.jpg" alt="Weatherette" title="Weatherette" />

<div class="shot-more">
<h4 class="shot-title">Weatherette</h4>
<span>Apps </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/weatherette.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item apps ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/calorbuddy.jpg" alt="Calorbuddy app" title="Calorbuddy app" />

<div class="shot-more">
<h4 class="shot-title">Calorbuddy app</h4>
<span>Apps </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/calorbuddy.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/rockpack_ipad.jpg" alt="Rockpack iPad" title="Rockpack iPad" />

<div class="shot-more">
<h4 class="shot-title">Rockpack iPad</h4>
<span>Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/rockpack_ipad.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item branding ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/iphone6.jpg" alt="iPhone 6 Infinity" title="iPhone 6 Infinity" />

<div class="shot-more">
<h4 class="shot-title">iPhone 6 Infinity</h4>
<span>Branding </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/iphone6.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item apps web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/lister.png" alt="Lister" title="Lister" />

<div class="shot-more">
<h4 class="shot-title">Lister</h4>
<span>Apps Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/lister.png" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item print ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/iconex.png" alt="Iconex" title="Iconex" />

<div class="shot-more">
<h4 class="shot-title">Iconex</h4>
<span>Print </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/iconex.png" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item print ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/bucket.jpg" alt="Bucket" title="Bucket" />

<div class="shot-more">
<h4 class="shot-title">Bucket</h4>
<span>Print </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/bucket.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item branding ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/icons_experiment.jpg" alt="Icons Experiment" title="Icons Experiment" />

<div class="shot-more">
<h4 class="shot-title">Icons Experiment</h4>
<span>Branding </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/icons_experiment.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/pixelplant_ipad.jpg" alt="pixelplant" title="pixelplant" />

<div class="shot-more">
<h4 class="shot-title">pixelplant</h4>
<span>Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/pixelplant_ipad.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item branding ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/player_one.png" alt="Player overlay" title="Player overlay" />

<div class="shot-more">
<h4 class="shot-title">Player overlay</h4>
<span>Branding </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/player_one.png" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item branding print ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/counter.png" alt="Generic Counter" title="Generic Counter" />

<div class="shot-more">
<h4 class="shot-title">Generic Counter</h4>
<span>Branding Print </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/counter.png" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item apps branding ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/instahardware_shot.jpg" alt="Instagram Hardware" title="Instagram Hardware" />

<div class="shot-more">
<h4 class="shot-title">Instagram Hardware</h4>
<span>Apps Branding </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/instahardware_shot.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/controller.png" alt="iPhone gaming controller" title="iPhone gaming controller" />

<div class="shot-more">
<h4 class="shot-title">iPhone gaming controller</h4>
<span>Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/controller.png" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item print web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/browsers_glyphs.jpg" alt="Browsers Glyphs" title="Browsers Glyphs" />

<div class="shot-more">
<h4 class="shot-title">Browsers Glyphs</h4>
<span>Print Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/browsers_glyphs.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>


<li class="portfolio-item web ">
<div class="shot-wrap">

<img width="400" height="300" src="images/portfolio/profile.jpg" alt="Profile view" title="Profile view" />

<div class="shot-more">
<h4 class="shot-title">Profile view</h4>
<span>Web </span>

<div class="view-larger"><a class="btn-flat" href="images/portfolio/profile.jpg" data-rel="prettyPhoto[gallery]" title="">View Larger</a></div>
</div><!--end .shot-more-->

</div><!--end .shot-wrap-->

</li>

</ul><!--end .portfolio-items-->
</div><!--end portfolio-holder-->                                
</div><!--end portfolio-bkg-ajax-->
</section><!--end portfolio-->

<section id="testimonials" class=" parallax" style=" background-image:url(images/bkgs/testimonials-bkg.jpg); ">
		
        	 				
				<div class="testimonials-bkg mutualWrap" style="  background-color:rgba(119, 204, 164, 0.8); ">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
				                <h2 class="section-sub-title">Testimonials</h2>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
				
                
<div class="row">
<div class="span8 offset2">
<div class="flexslider flexslider-testimonials">

<ul class="slides">


<li><h4>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo
sapien felis. Pellentes faucibus sollicitudin ante,at porta felisrutrum
eget. Sed ut nisl urna,e get convallis purus pretium facilisis. Interdum et malesuada."<span> - John Doe</span></h4></li>


<li><h4>"Donec venenatis sodales ante quis tempus. Etiam in ante et urna imperdiet porttitor. Quisque at nibh aliquam, iaculis nulla et, auctor velit. Aliquam mi orci, ultricies ut porta eget eleifend."<span> - April Doe</span></h4></li>


<li><h4>"Nulla ac interdum risus, id molestie nibh. Nam egestas nec orci sit amet venenatis. Fusce euismod lorem a elementum aliquet. Maecenas tincidunt auctor nibh ante quis tempus."<span> - Ryan Doe</span></h4></li>


</ul>

</div><!--end flexslider-testimonials-->
</div><!--end span8-->
</div><!--end row-->
</div><!--end container -->
</div><!--end testimonials-->
</section>

<section id="services" class=" no-parallax" style=" ">
		
        	                 
                <div class="services-bkg mutualWrap" style=" ">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
								<h1 class="section-title">Services</h1>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
                
				 	
    
    <div class="row service-items">
    <div class="span5 service">
    <span><img src="images/web-design.png" alt=""></span>
	<h5>Web Design</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
    
       
    		<div class="span5 offset2 service">
    <span><img src="images/logo-design.png" alt=""></span>
	<h5>Logo Design</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
    
    	  </div><!--end row--> 	

	<div class="row service-items">
    <div class="span5 service">
    <span><img src="images/web-apps.png" alt=""></span>
	<h5>Web Apps</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
     
    		<div class="span5 offset2 service">
    <span><img src="images/social-media.png" alt=""></span>
	<h5>Social Media</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
    
    	  </div><!--end row--> 	

		
    
    <div class="row service-items">
    <div class="span5 service">
    <span><img src="images/motion-graphics.png" alt=""></span>
	<h5>motion graphics</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
    
    	

	    
    		<div class="span5 offset2 service">
    <span><img src="images/photography.png" alt=""></span>
	<h5>photography</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Integer commodo sapien elis. Pellentes faucibus sollicitudin ante, at porta felis rutrum.</p>
	</div><!--end service-->
    
    	  </div><!--end row--> 	

	                 
                </div><!--end container -->
				</div><!--end services-bkg-->
				
				                  
        </section>
        
      <section id="pricing" class=" parallax" style=" background-image:url(images/bkgs/price-bkg.jpg); ">
		
        	 				
				<div class="pricing-table-bkg mutualWrap" style="  background-color:rgba(119, 204, 164, 0.8); ">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
				                <h2 class="section-sub-title">Pricing Table</h2>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
				
                <div class="row main-table">


<div class="span3 table-column">
<header>
<h3 class="column-title">Basic</h3>
<h4 class="column-price">$100</h4>
</header>
<ul>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Tehnical Support</li>
<li>Email Address</li>
</ul><div class="price-btn"><a class="btn-flat-fill" href="#">Buy Now</a></div>
</div><!--end table-col -->


<div class="span3 table-column">
<header>
<h3 class="column-title">Premium</h3>
<h4 class="column-price">$200</h4>
</header>
<ul>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Tehnical Support</li>
<li>Email Address</li>
</ul><div class="price-btn"><a class="btn-flat-fill" href="#">Buy Now</a></div>
</div><!--end table-col -->


<div class="span3 table-column">
<header>
<h3 class="column-title">Ultimate</h3>
<h4 class="column-price">$300</h4>
</header>
<ul>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Tehnical Support</li>
<li>Email Address</li>
</ul><div class="price-btn"><a class="btn-flat-fill" href="#">Buy Now</a></div>
</div><!--end table-col -->


<div class="span3 table-column">
<header>
<h3 class="column-title">Xtreme</h3>
<h4 class="column-price">$500</h4>
</header>
<ul>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Tehnical Support</li>
<li>Email Address</li>
</ul><div class="price-btn"><a class="btn-flat-fill" href="#">Buy Now</a></div>
</div><!--end table-col -->


</div><!--end main-table -->

</div><!--end container -->
</div><!--end pricing-table-bkg-->

</section>

<section id="blog" class=" parallax" style=" background-image:url(images/bkgs/gplaypattern.png); ">
		
        	                 
                <div class="blog-bkg mutualWrap">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
								<h1 class="section-title">Blog</h1>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
                
				
<div class="row"> 
<div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-6-400x300.jpg" alt="Tincidunt vitae magna" title="Tincidunt vitae magna" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 22nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Tincidunt vitae magna</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->

<div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-5-400x300.jpg" alt="" title="" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 21nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Pellentesque quam justo</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->
        
        
        
 <div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-4-400x300.jpg" alt="" title="" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 22nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Feugiat nec malesuada dignissim</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->
        
         </div><!--end row--> 

<div class="row"> 
 <div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-1-400x300.jpg" alt="" title="" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 22nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Pellentes faucibus sollicitudin ante</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->


 <div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-2-400x300.jpg" alt="" title="" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 22nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Duis id odio eu augue eleifend</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->
        
        
   <div class="span4 blog-col">
<div class="blog-img">

<img width="400" height="300" src="images/blog/blog-3-400x300.jpg" alt="" title="" />
<div class="blog-more">
<div class="view-more">
<div class="view-more-cell">
<a class="btn-flat" href="blog-single-post.html" title="">Read More</a>
</div>
</div>
</div><!--end .blog-more-->

</div><!--end blog-img-->
<div class="blog-info">posted on <span>August 22nd, 2013</span> | in <a href="#" title="View all posts in News" >News</a> </div>
<div class="blog-text">
<h4 class="title-blog-post"><a href="blog-single-post.html">Maecenas lorem mi interdum</a></h4>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices pretium lorem at vestibulum. Suspendisse volutpat rhoncus dictum. Duis id odio eu augue eleifend elementum....</p></div>
</div><!--blog-col-->
        
 </div><!--end row--> 
                 
 </div><!--end container -->
</div><!--end blog-bkg-->
				
 </section>
 
  <section id="contact" class=" no-parallax" style=" ">
		
        	                 
                <div class="contact-bkg mutualWrap" style="  background-color:rgba(38, 54, 68, 1.0); ">
				<div class="container">
				<div class="row">
				<div class="span12">

				<div class="alignc">
								<h1 class="section-title section-color-c">Contact</h1>
				</div>

				
				</div><!--end span12 -->
				</div><!--end row -->
                
				<div class="row">
<div class="span7">

<div id="contact-container" class="clearfix">

<form method="post" id="my-form" action='include/contact-process.php'>

<input type="text" name="author" class="comm-field" placeholder="Name"  value="" size="22" tabindex="1" aria-required='true' />
<input type="text" name="email" class="comm-field" placeholder="Email" value="" size="22" tabindex="2" aria-required='true'  />
<input type="text" name="title" class="comm-field" placeholder="Subject" value="" size="22" tabindex="3" aria-required='true' />
        
<textarea name="message" id="message2" placeholder="Message" rows="9" tabindex="4"></textarea>
		
<input type="submit" value="Send Message" id="submit" tabindex="5"  />
    
</form>
</div>

<div id="output"></div>

</div><!--end span7-->

<div class="span4 offset1">

<header class="tright-contact">
<h5>Contact Details</h5>
</header>


<div class="margin-t">
<p>In justo risus, fermentum eget egestas eget, elementum vitae tortor. Maecenas lorem mi, interdum id commodo ac, tincidunt vitae magna. Pellentesque quam justo, aliquam non accumsan a, aliquam id dolor.</p>

<div class="contact-address">
<ul>
<li>501 Boulevard, New York City, New York</li>
<li>1-800-123-1234</li>
<li>contact [at] atrium [dot] com</li>
</ul>
</div>

</div>

</div><!--end span4-->
</div><!--end row-->                
                </div><!--end container -->
				</div><!--end contact-bkg-->
				
				                  
        </section>

<footer class="mutualWrap">

<div class="container">
<div class="row">

<div class="span8 offset2">
     <p class="alignc">&copy; 2013 Atrium. All rights reserved. Theme by matchthemes.</p>
</div><!--end span8 -->

</div><!--end row -->

<div class="row">
<div class="span12 footer-icons">

 <ul class="footer-social">
 
   <li><a class="foo-fb" href="#" target="_blank">Facebook</a></li>
      <li><a class="foo-tw" href="#" target="_blank">Twitter</a></li>
     <li><a class="foo-gplus" href="#" target="_blank">GPlus</a></li>
      <li><a class="foo-linkedin" href="#" target="_blank">Linkedin</a></li>
      <li><a class="foo-pinterest" href="#" target="_blank">Pinterest</a></li>
      <li><a class="foo-dribbble" href="#" target="_blank">Dribbble</a></li>
       <li><a class="foo-vimeo" href="#" target="_blank">Vimeo</a></li>
      <li><a class="foo-stumble" href="#" target="_blank">Stumbleupon</a></li>
     <li><a class="foo-flickr" href="#" target="_blank">Flickr</a></li>
   </ul>
 
</div><!--end span12 -->

</div><!--end row -->

</div><!--end container-->

</footer>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.min.js'></script>
<script type='text/javascript' src='js/jquery.sticky.js'></script>
<script type='text/javascript' src='js/jquery.flexslider-min.js'></script>
<script type='text/javascript' src='js/jquery.isotope.min.js'></script>
<script type='text/javascript' src='js/prettyphoto/js/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='js/jquery.form.min.js'></script>
<script type='text/javascript' src='js/contactform.js'></script>
<script type='text/javascript' src='js/jquery.nicescroll.min.js'></script>
<script type='text/javascript' src='js/init.js'></script>

</body>
</html>